<template>
  <div>
    <div class="oss_file">
      <input type="file" :id="id" :multiple="multiple" @change="doUpload">
    </div>
  </div>
</template>

<script>
import { MessageBox, Indicator } from "mint-ui";
import request from "@/utils/request";
import Cookies from "js-cookie";
import global_ from "@/global.config";
export default {
  props: {
    multiple: Boolean,
    id: String,
    len: Number,
    url: Array
  },
  data() {
    return {
      urls: this.url //①创建props属性url的副本--urls
    };
  },
  watch: {
    url(val) {
      this.urls = val; //②监听外部对props属性url的变更，并同步到组件内的data属性urls中
    }
  },
  methods: {
    doUpload() {
      const _this = this;
      if (Cookies.get("openid") && Cookies.get("passport")) {
        request
          .get(this.global.API_URL, {
            action: "/aliyun/AliyunAction/sts"
          })
          .then(response => {
            const OSS = require("ali-oss");
            let params = response.obj;
            let client = new OSS({
              accessKeyId: params.credentials.accessKeyId,
              accessKeySecret: params.credentials.accessKeySecret,
              stsToken: params.credentials.securityToken,
              endpoint: params.endpoint,
              bucket: params.bucket
            });
            const files = document.getElementById(_this.id);
            console.log(files)
            if (files.files) {
              const fileLen = document.getElementById(_this.id).files;
              if (fileLen.length + _this.urls.length > _this.len) {
                MessageBox.alert(`最多可以上传文件数为${_this.len}`, "提示");
                return;
              }
              let resultUpload = _this.urls;
              Indicator.open({
                text: "上传中...",
                spinnerType: "fading-circle"
              });
              for (let i = 0; i < fileLen.length; i++) {
                const file = fileLen[i];
                let suffix = file.name.split(".").pop()
                // if(suffix!='png'||suffix!='PNG'||suffix!='image/png'||suffix!='jpg'||suffix!='JPG'||suffix!='image/jpg'||suffix!='gif'||suffix!='GIF'||suffix!='image/jpeg'||suffix!='JPEG'||suffix!='heic'){
                //     MessageBox.alert(`请上传“png jpg gif jpeg”格式的照片`, "提示");
                //     return;
                // }
                let storeAs = `${params.dir}/${global_.APPID}/${Date.parse(
                  new Date()
                )}${Math.floor(Math.random() * 100 + 1)}.${suffix}`;
                let baseUrl = `${params.host}/${storeAs}`;
                client
                  .multipartUpload(storeAs, file, {})
                  .then(results => {
                    Indicator.close();
                    resultUpload.push(baseUrl);
                  })
                  .catch(err => {
                    Indicator.close();
                    console.log(err);
                  });
              }
              // _this.url = resultUpload;
              _this.urls = resultUpload;

              //③组件内对urls变更后向外部发送事件通知
              _this.$emit("changeUrl", _this.urls);
            }
          });
      } else {
        MessageBox.alert("未授权用户", "提示");
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.oss_file {
  position absolute
  left 0
  right 0
  top 0
  bottom 0
}
.oss_file  input {
  right: 0
  top: 0
  opacity: 0
  // filter: alpha(opacity=0)
  cursor: pointer
  width: 100%
  height: 100%
}
</style>
